<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Popoto Search</title>
    <link rel="stylesheet" href="./dist/popoto.min.css">
    <style>
        #popoto-graph:fullscreen {
            width: 100%;
            height: 100%;
        }

        #popoto-graph:-webkit-full-screen {
            width: 100%;
            height: 100%;
        }

        #popoto-graph:-moz-full-screen {
            width: 100%;
            height: 100%;
        }

        #popoto-graph:-ms-fullscreen {
            width: 100%;
            height: 100%;
        }

        #modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        #modal-content {
            background-color: #fefefe;
            color: #2e3138;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Graph</span> search
    </div>

    <div class="ppt-container-graph">
        <nav id="popoto-taxonomy" class="ppt-taxo-nav">
            <!-- Label/taxonomy filter will be generated here -->
        </nav>
        <div id="popoto-graph" class="ppt-div-graph">
            <!-- Graph will be generated here-->
        </div>
    </div>

    <div id="popoto-query" class="ppt-container-query">
        <!-- Query viewer will be generated here -->
    </div>

    <div id="popoto-cypher" class="ppt-container-cypher">
        <!-- Cypher query viewer will be generated here -->
    </div>

    <div class="ppt-section-header">
        <!-- The total results count is updated with a listener defined below -->
        RESULTS <span id="result-total-count" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results will be generated here -->
    </div>

</section>
<div id="modal">
    <div id="modal-content">
        <p id="error-title">An error occurred while trying to start Popoto please check your configuration and/or the
            console log:</p>
        <p><code id="error-content">Error content</code></p>
    </div>
</div>

<!---------------------->
<!-- Required scripts -->

<script src="/node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/neo4j-driver-lite" charset="utf-8"></script>
<script src="dist/popoto.js" charset="utf-8"></script>

<script>

    /**
     * Create the neo4j driver to use in Popoto query runner
     *
     * See Neo4j driver documentation here:
     * https://neo4j.com/docs/javascript-manual/current/get-started/
     * https://neo4j.com/docs/api/javascript-driver/4.3/
     */
    var driver = neo4j.driver(
        "neo4j+s://demo.neo4jlabs.com:7687",
        neo4j.auth.basic("movies", "movies"),
    );

    /**
     * Set the driver to Popoto's query runner
     */
    popoto.runner.DRIVER = driver

    // If needed session creation can also be overridden here
    // popoto.runner.createSession = function () {
    //     return runner.DRIVER.session({defaultAccessMode: "READ"})
    // };

    /**
     * Define the Label provider you need for your application.
     * This configuration is mandatory and should contain at least all the labels you could find in your graph model.
     *
     * In this version only nodes with a label are supported.
     *
     * By default If no attributes are specified Neo4j internal ID will be used.
     * These label provider configuration can be used to customize the node display in the graph.
     * See www.popotojs.com or example for more details on available configuration options.
     */
    popoto.provider.node.Provider = {
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name",
            "autoExpandRelations": true // if set to true Person nodes will be automatically expanded in graph
        },
        "Movie": {
            "returnAttributes": ["title", "released", "tagline"],
            "constraintAttribute": "title"
        }
    };

    /**
     * Here a listener is used to retrieve the total results count and update the page accordingly.
     * This listener will be called on every graph modification.
     */
    popoto.result.onTotalResultCount(function (count) {
        document.getElementById("result-total-count").innerHTML = "(" + count + ")";
    });

    /**
     * The number of results returned can be changed with the following parameter.
     * Default value is 100.
     *
     * Note that in this current version no pagination mechanism is available in displayed results
     */
    //popoto.query.RESULTS_PAGE_SIZE = 100;


    /**
     * For this version, popoto.js has been generated with debug traces you can activate with the following properties:
     * The value can be one in DEBUG, INFO, WARN, ERROR, NONE.
     *
     * With INFO level all the executed cypher query can be seen in the navigator console.
     * Default is NONE
     */
    popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;

    driver.verifyConnectivity().then(function () {
        /**
         * Start popoto.js generation.
         * The function requires the label to use as root element in the graph.
         */
        popoto.start("Person");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })
</script>
</body>
</html>
